<template>
  <view 
    class="result-custom-page"
    v-if="isLoadOk"
  >
    <view class="base-info-wrapper">
      <!-- <view class="num-box">测评报告编号：{{report.serialNumber}}</view> -->
      <!-- <view class="name-box">
        {{report.name}}
      </view> -->
      <view class="conclusion-box">
        <view class="tit" v-if="report.conclusion">{{report.conclusion}}</view>
        <view class="sub-tit" v-if="report.subConclusion">
          {{report.subConclusion}}
        </view>
        <view class="label">
          报告结果
        </view>
        <view class="time">测评时间：{{report.sclTime}}</view>
        <view v-if="report.qsnMax" class="statistics-total">本测试共{{report.qsnMax}}题，你答对了{{report.rightQsn}}题</view>
      </view>
    </view>
    
    <view class="data-conclusion-box" v-if="report.scoreInfoType != 'hide'">
      <template v-if="report.scoreInfoType == '1' || report.scoreInfoType == '3'">
        <view class="label-wrapper-1">
          <view class="text col-1">维 度</view>
          <view class="text col-2">{{report.scoreInfoRightStr || '我的指标'}}</view>
          <!-- <view class="text col-3">我的指标</view> -->
        </view>
        
        <view class="data-wrapper-1">
          <!-- index === 0 ? 'head-row' : -->
          <view :class="['row']" v-for="(item,index) in report.scoreArr" :key="index">
            <view class="col-1">
              <text class="text">{{item.label}}</text>
              <!-- <template v-if="index != 0"> -->
                <text class="colon">:</text>
              <!-- </template> -->
            </view>
            <view class="col-2" >
              <text class="num" v-show="item.score">{{item.score}}</text>
            </view>
            <view class="col-3">{{item.str}}</view>
            <!-- <view class="col-4">{{item.commonInfo}}</view> -->
          </view>
        </view>
      </template>
      <template v-else-if="report.scoreInfoType == '2'">
        <view class="label-wrapper-2">
          <view class="text col-1">得 分</view>
          <view class="text col-2">健康指标</view>
        </view>
        <view class="data-wrapper-2">
          <view :class="['row']" v-for="(item,index) in report.scoreArr" :key="index">
            <view class="col-1">
              <text class="text">{{item.score}}</text>
              <!-- <text class="colon"></text> -->
            </view>
            <!-- <view class="col-2" >
              <text class="num" v-show="item.score">{{item.score}}</text>
            </view> -->
            <view class="col-2">{{item.healthScore}}</view>
          </view>
        </view>
      </template>
      <view v-else-if="report.scoreInfoType == '4'" class="scoreinfo-cls-4">
        <view class="label-wrapper">
          <view class="col-1">维度</view>
          <view class="col-2">我的指标</view>
          <view class="col-3">健康指标</view>
        </view>
        <view class="data-wrapper">
          <view :class="[index === 0 ? 'head-row' :'row']" v-for="(item,index) in report.scoreArr" :key="index">
            <view class="col-1">
              {{item.label}}
              <!-- <text class="text">{{item.label}}</text> -->
              <!-- <text class="colon"></text> -->
            </view>
            <!-- <view class="col-2" >
              <text class="num" v-show="item.score">{{item.score}}</text>
            </view> -->
            <view class="col-2">{{item.score}}</view>
            <view class="col-3">{{item.conclusion}}</view>
            <view class="col-4">{{item.healthScore}}</view>
          </view>
        </view>
      </view>
    </view>
    
    
    <view class="main-img-box"  v-if="report.mainImg">
      <BlockTit tit="总体情况" />
      <view class="main-img-inner-box">
        <image :src="report.mainImg" mode=""></image>
      </view>
    </view>
    
    <view class="radar-box" v-if="report.hasRadarGraph">
      <BlockTit tit="多维雷达图" />
      <view class="radar-canvas" v-if="showCanvas">
        <CommonChart type="radar" :chartData="RadarModel" background="none" canvasId="school_b" :animation="false"
          :canvas2d="isCanvas2d" 
          :opts="{
             dataLabel:true,
             fontColor:'#333',
             fontSize:14,
             legend:{
               show:false
             },
             extra:{
               radar:{
                 gridType:'radar',
                 radius:90,
                 labelShow:true,
                 border:true,
                 gridCount:4,
                 axisLabel:false,
                 max:radarMax,
               }
             },
           }"
           :resshow="delayload" 
         />
      </view>
    </view>
    
   <template v-if="report.normComparison">
      <view class="dashed-line"></view>
      <view class="norm-comparison-box">
        <BlockTit tit="常模对比" />
        <view class="tit">{{report.normComparison.tit}}</view>
        <view class="legend-wrapper">
          <view class="legend">
            <image :src="report.normComparison.url" mode=""></image>
          </view>
          
         <view class="annotation-wrapper">
           <view class="annotation-box" v-for="(item,index) in report.normComparison.legend">
             <view class="icon" :style="{'background':item.color}"></view>
             <view class="text">{{item.label}}</view>
           </view> 
          </view>
        </view>      
      </view>
    </template>

    <template v-if="report.detailedResults">
      <view class="dashed-line"></view>
      <view class="detailed-results-box">
        <BlockTit tit="结果详解" />
        <!-- {{report.imgAndScoreBlockType}} -->
        <view v-if="report.imgAndScoreBlockType == '1'" class="img-and-score-block">
          <view class="tip-text-1">{{report.otherTipText}}</view>
          <view class="tip-text-2">{{report.firstScore}}</view>
          <view class="img-box">
            <image :src="report.otherTipImg" mode=""></image>
          </view>
        </view>
        
        <view class="summary-wrapper" v-if="report.detailedResults.p">
          <view class="tit" v-if="report.detailedResults.tit">{{report.detailedResults.tit}}</view>
          <view class="p">{{report.detailedResults.p}}</view>
          
        </view>
        <image mode="widthFix" class="main-img" v-if="report.detailedResults.img" :src="report.detailedResults.img">
        <!-- {{report.detailedResults.img}} -->
        </image>
        
        <template v-for="(item,index) in report.detailedResults.contentArr">
          <!-- {{JSON.stringify(item)}} -->
          <view class="block">
            <view class="sub-tit" v-if="item.tit">{{item.tit}}</view>
            <view v-if="item.p" class="p">{{item.p}}</view>
            <view v-if="item.img" class="sub-img-wrapper">
              <image  :src="item.img" class="sub-img" mode="widthFix"></image>
            </view>
            <!-- {{JSON.stringify(item.contentArr)}} -->
            <view v-if="item.contentArr">
              <template v-for="(subItem,subIndex) in item.contentArr">
                <view v-if="subItem.conclusion" class="conclusion">{{subItem.conclusion}}</view>
                <view v-if="subItem.p" class="p">{{subItem.p}}</view>
              </template>
            </view>
          </view>
          <view v-if="item.hasLine" class="dashed-line"></view>
        </template>
      </view>
    </template>
    
    <template v-if="report.sciencePopularization">
      <view class="science-popularization-box">
        <BlockTit tit="知识科普" />
        <view class="summary-wrapper">
          <view class="img">
            <image :src="staticImgs.resultImg1" mode=""></image>
          </view>
          <view class="tit" v-if="report.sciencePopularization.tit">{{report.sciencePopularization.tit}}</view>
        </view>
        <template v-if="report.sciencePopularization.contentArr">
          <template v-for="(item,index) in report.sciencePopularization.contentArr">
            <view class="block">
              <view class="sub-tit" v-if="item.tit">{{item.tit}}</view>
              <view class="sub-img" v-if="item.img">
                <image :src="item.img" mode="widthFix"></image>
              </view>
              <view class="p" v-if="item.p">
                {{item.p}}
              </view>
              <view class="text-list" v-else-if="item.list">
                  <view class="li" v-for="(subItem,subIndex) in item.list" :key="subIndex">{{subItem}}</view>
              </view>
              <template v-else-if="item.contentArr">
                <template v-for="(subItem,subIndex) in item.contentArr">
                    <view class="sub-sub-tit" v-if="subItem.tit">
                      {{subItem.tit}}
                    </view> 
                    <view class="p" v-if="subItem.p">
                      {{subItem.p}}
                    </view>  
                </template>
                
              </template>
            </view>
            <!-- <view class="dashed-line"></view> -->
          </template>
        </template>
      </view>
      
    </template>

   
   <template v-if="report.suggestions">
     <view class="suggestions-box">
       <BlockTit tit="针对性小建议" />
       <!-- {{report.suggestions}} -->
       <view class="summary-wrapper">
         <view class="img">
           <image :src="staticImgs.resultImg2" mode=""></image>
         </view>
         <view class="p" v-if="report.suggestions.p">
           {{report.suggestions.p}}
         </view>
       </view>
       
       <template v-for="(item,index) in report.suggestions.contentArr">
         <view class="block">
           <view class="sub-tit" v-if="item.tit">{{item.tit}}</view>
           <view class="p" v-if="item.p">
             {{item.p}}
           </view>
           <view class="text-list" v-else-if="item.list">
               <view class="li" v-for="(subItem,subIndex) in item.list" :key="subIndex">{{subItem}}</view>
           </view>
           <template v-else-if="item.contentArr">
             <template v-for="(subItem,subIndex) in item.contentArr">
                 <view class="sub-sub-tit" v-if="subItem.tit">
                   （{{subIndex+1}}) {{subItem.tit}}
                 </view> 
                 <view class="p">
                   {{subItem.p}}
                 </view>  
             </template>
             
           </template>
         </view>
         <!-- <view class="dashed-line"></view> -->
       </template>
     </view>
   </template>
   <template>
     <view class="checkup-mental-entry-box" v-if="otherMbtiHasDone">
       <MentalHealthCheckupEntryVue sourceType="18" />
     </view>
     <view class="ad-img-box" v-else>
       <image class="img" @click="toOtherScl" :src="staticImgs.adImg" mode=""></image>
     </view>
   </template>
    <view class="references-box" v-if="referenceList && referenceList.length">
      <view class="tit">参考文献</view>
      <view class="text-list">
        <view class="text" v-for="(text,index) in referenceList" :key="index">
          [{{index+1}}]{{text}}
        </view>
      </view>
    </view>
    
    <view class="report-time-box">
      <view>此测评报告仅供参考</view>
      <view>报告时间：{{report.createTime}}</view>
    </view>
  </view>
</template>

<script>
  import BlockTit from '@/subcontractorB/components/BlockTit.vue'
  import CommonChart from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
  import MentalHealthCheckupEntryVue from "@/components/MentalHealthCheckupEntry.vue";
  export default {
    components:{
      BlockTit,
      CommonChart,
      MentalHealthCheckupEntryVue
    },
    props:{
      otherMbtiHasDone:{
        type:Boolean,
        default:false
      },
      pageData:{
        type:Object,
        default:null
      },
      showCanvas:{
        type:Boolean,
        default:true
      },
      // otherId:{
      //   type:String,
      //   default:''
      // },
      sclArr:{
        type:Array,
        default:()=>[]
      }
    },
    data(){
      return {
        staticImgs:{
          topBg:this.imgBaseURL + '/scl/scl_result_custom_bg.png',
          resultImg1:this.imgBaseURL + '/scl/scl_result_info.png',
          resultImg2:this.imgBaseURL + '/scl/scl_result_suggestion.png',
          point: this.imgBaseURL + '/scl/result/progress-point-1.png',
          adImg:this.imgBaseURL + '/scl/result/multipack/mbti/job-scl-ad-img.png',
        },
        referenceList:[],
        isLoadOk:false,
        report:{},
        RadarModel: {},
        delayload:false,
        radarMax:60,
        otherId:''
      }
    },
    watch:{
      showCanvas(val){
        if(val){
          
        }
      },
      pageData:{
        handler(v){
          console.log(v,'======pageDatas')
          if(v){
            console.log(this.isLoadOk,'--====this.isLoadOk')
            this.report = v
            this.referenceList = v.literatrue
            this.RadarModel = v.radarData
            this.isLoadOk = true
            if(v.radarMax){
              this.radarMax = v.radarMax
            }
            
            this.getData()
          }
        },
        immediate:true,
        deep:true
      },
      sclArr:{
        handler(val){
          if(val && val.length){
            this.otherId = val[2].sclId
          }
          console.log(val,'====val===')
        },
        immediate:true
      }
    },
    methods:{
      toOtherScl(){
        uni.navigateTo({
          url:'/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON.stringify({
            sclId: this.otherId,
          })
        })
      },
      async getData() {
        uni.showLoading({
          title: '加载中'
        });
        await setTimeout(() => {
          this.delayload = true;
          uni.hideLoading();
        }, 600)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .ad-img-box{
    width: 100%;
    // height: 160rpx;
    margin: 24rpx 0;
    
    .img{
      width: 730rpx;
      height: 540rpx;
          margin-left: 13rpx;

    }
  }
  view{
    box-sizing: border-box;
    word-break: break-all;
  }
  
  .img-and-score-block{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 70rpx;
        padding-bottom: 40rpx;
        
        .tip-text-1{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 40rpx;
          color: #185199;
          // line-height: 56rpx;
          text-align: center;
          font-style: normal;
        }
        
        .tip-text-2{
          font-size: 60rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          // font-size: 40rpx;
          color: #185199;
          // line-height: 56rpx;
          text-align: center;
          font-style: normal;
          margin-bottom: 40rpx;
        }
        
        .img-box{
          width: 694rpx;
          height: 648rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
  }
  
  .result-custom-page{
    box-sizing: border-box;
    width: 100vw;
    min-height: 100vh;
    position: relative;
    background-size: 750rpx 1310rpx;
    background-repeat: no-repeat;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);  
    
    
    .base-info-wrapper{
      margin: auto;
      padding: 90rpx 28rpx 80rpx 28rpx;
      padding-top: 0;

      .num-box{
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        color: #666666;
      }
      
      .name-box{
        margin: auto;
        margin-top: 12rpx;
        // width: 696rpx;
        width: 100%;
        height: 120rpx;
        // background: #FFFFFF;
        box-shadow: 0rpx 12rpx 20rpx 0rpx #EEF4FF;
        border-radius: 12rpx;
        // opacity: 0.6;
        background-color: rgba(255, 255, 255, .6);
        border: 3rpx solid #AAC4F9;
        
        line-height: 120rpx;
        text-align: center;
        
        font-size: 40rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        color: #1A1B1F;
      }
      .conclusion-box{
        // margin-top: 100rpx;
        margin-top: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        
        .tit{
          
          font-size: 50rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #185199;
        }
        
        .sub-tit{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #185199;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          margin-top: 14rpx;
        }
        
        .statistics-total{
          width: 480rpx;
          height: 60rpx;
          border-radius: 30rpx;
          border: 1px solid #B4D3EF;
          box-sizing: border-box;
          
          margin-top: 30rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 60rpx;
          text-align: center;
          font-style: normal;
        }
        
        .label{
          margin-top: 20rpx;
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #333333;
          
          position: relative;
          
          &::after{
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            right: -29rpx;
            position: absolute;
          }
          &::before{
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            left: -29rpx;
            position: absolute;
          }
        }
        //.label - end
        
        .time{
          margin-top: 20rpx;
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 300;
          color: #666666;
        }
      }
    }
    // ..base-info-wrapper - end
    .data-conclusion-box{
      width: fit-content;
      margin: auto;
      .col-1{
        // width: 330rpx;
        width: 48%;
        padding-left: 30rpx;
      }
      .col-2{
        // width: 190rpx;
        width: 28%;
      }
      .col-3{
        // width: 180rpx;
        width: 24%;
        padding-right: 24rpx;
      }
        
      .label-wrapper,.label-wrapper-1,.label-wrapper-2{
        display: flex;
        width: 700rpx;
        margin: auto;
        border-bottom: 4rpx solid #333;
        padding-bottom: 16rpx;
        justify-content: space-between;

        .text{
          font-size: 30rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          color: #333333;
        }
        
      }
     
      .data-wrapper,.data-wrapper-1,.data-wrapper-2 {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-bottom: 64rpx;
          width: 710rpx;
          margin-top: 16rpx;
          box-shadow: 0px 0px 0px 0.5px #c1c1c1;
          padding-bottom: 24rpx;
      
          .head-row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 96rpx !important;
            background: rgba(211, 224, 255, .32);
            
            .col-1 {
              width: 32%;
              padding-left: 30rpx;
              
              .text {
                font-size: 36rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #393C5A;
              }
                    
              .colon {
                font-size: 32rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #393C5A;
              }
            }
                  
            .col-2 {
              width: 16%;
              .num {
                font-size: 46rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #6B77FF;
              }
            }
                  
            .col-3 {
              width: 28%;
              
              font-size: 36rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #EE5757;
              margin-left: 4rpx;
            }
                  
            .col-4 {
              width: 24%;
              padding-right: 24rpx;
              padding-right: 54rpx;
              text-align: right;
                  
              font-size: 36rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #393C5A;
              margin-left: 20rpx;
            }
            
          }
      
          .row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 78rpx;
            
            .col-1 {
              width: 33%;
              padding-left: 26rpx;
              
              .text {
                // font-size: 36rpx;
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #393C5A;
              }
                    
              .colon {
                font-size: 32rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #393C5A;
              }
            }
                  
            .col-2 {
              width: 16%;
              .num {
                // font-size: 46rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #6B77FF;
                font-size: 32rpx;
              }
            }
                  
            .col-3 {
              text-align: right;
              width: 38%;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              margin-left: 4rpx;
              font-size: 24rpx;
              color: #333333;
            }
                  
            .col-4 {
              width: 24%;
              padding-right: 24rpx;
              padding-right: 54rpx;
              text-align: right;
  
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #393C5A;
              margin-left: 20rpx;
            }
            
          }
                
      }
      
      
      .data-wrapper-1{
        
        .row{
          .col-1{
              width: 40%;
          }
        }
      }
      
      
      
      .label-wrapper-2{
        .col-1{
          text-align: left;
        }
        .col-2{
          text-align: right;
          padding-right: 28rpx;  
        }
      }
      
      .data-wrapper-2{
        padding-bottom: 0;
        
        .row{
            display: flex;
            justify-content: space-between;
            
background: rgba(211,224,255,0.3);
            
            .col-1 .text{
              font-size: 46rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #6B77FF;
              // padding-left: 38rpx;
              padding-left: 16rpx;
            }
            .col-2{
              font-size: 36rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #393C5A;
              width: 28%;
              
                  text-align: right;
                  padding-right: 40rpx;
            }
        }
        
      }
      
      
      .scoreinfo-cls-4{
        .label-wrapper{
          .col-1{
            text-align: left;
            width: 290rpx;
          }
          .col-2{
            text-align: left;
            width: 140rpx;
          }
          .col-3{
            text-align: right;
            width: 160rpx;
          }
        }
        .data-wrapper{
          
          .head-row .col-1{
            color: #333333 !important;
          }
          .col-1{
            text-align: left;
            // min-width: 120rp;
            width: 200rpx;
          }
          .col-2{
            width: 100rpx;
            margin:0 10rpx;
          }
          .col-3{
            text-align: left;
            width: 180rpx;
            padding-left: 40rpx;
          }
          .col-4{
            width: 220rpx;
          }
        }
      }
      //scoreinfo-cls-4 - end
      
    }
    // .data-conclusion-box - end
    
    .main-img-box{
      margin: auto;
      margin-top: 70rpx;
    
      
      .main-img-inner-box{
          margin: auto;
          margin-bottom: 24rpx;
          width: 642rpx;
          height: 564rpx;
          
          image{
            width: 100%;
            height: 100%;
          }
      }
      
    }
    
    .radar-box{
      .radar-canvas{
        margin-top: 36rpx;
      }
    }
    
    .dashed-line{
      margin: auto;
      width: 694rpx;
      height: 1rpx;
      
      background-image: repeating-linear-gradient(
          to right,
          #A9C4F2,
          #A9C4F2 10rpx,
          transparent 10rpx,
          transparent 20rpx
      );
    }
    // .dashed-line - end
    
    .progress-box{
      padding-top: 48rpx;
    }
    
    .progress-comp{
      margin-top: 70rpx;
      margin-bottom: 70rpx;
      
      display: flex;
      flex-direction: column;
      width: 100%;
      position: relative;
      
      display: flex;
      align-items: center;
      
      
      .bg{
        width: 592rpx;
        height: 320rpx;
      }
      
      .point-comp{
        position: absolute;
        bottom: 10rpx;
        left: 354rpx;
        z-index: 2;
        // transform: rotateZ(45deg);
        // transform-origin: bottom;
        transform-origin: bottom center;
        
        .point{
          margin: auto;
          width: 48rpx;
          height: 285rpx;
        }
      }
      
      .num-1,.num-2,.num-3,.num-4,.num-5{
        position: absolute;
        bottom: 0;
        font-size: 20rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        color: #333333;
        line-height: 28rpx;
        z-index: 1;
      }
      .num-1{
        left: 230rpx;
        
      }
      .num-5{
        right: 230rpx;
      }
      .num-2{
        left: 252rpx;
        bottom: 90rpx;
      }
      .num-4{
        bottom: 90rpx;
        right: 252rpx;
      }
      .num-3{
        bottom: 130rpx;
      }
      
      
    }
    
    .norm-comparison-box{
      // margin: auto;
      margin-top: 70rpx;
      margin-bottom: 70rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .tit{
        margin: auto;
        margin-top: 60rpx;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      
      .legend-wrapper{
        .legend{
          margin: auto;
          margin-top: 80rpx;
          &,image{
            width: 472rpx;
            height: 472rpx;
            // background-color: #185199;
          }
        }
        .annotation-wrapper{
          margin-top: 60rpx;
          
          display: flex;
          align-items: center;
          padding: 0 40rpx;
          // justify-content: space-between;
          justify-content: center;
          column-gap: 40rpx;
          .annotation-box{
            display: flex;
            align-items: center;
            .icon{
              width: 16rpx;
              height: 16rpx;
              // background: #A09FF2;
              border-radius: 11rpx;
              margin-right: 6rpx;
            }
            .text{
              font-size: 24rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              color: #333333;
            }
          }
        }
      }
      //.legend-wrapper - end
      
      
    }
    // .norm-comparison-box - end
    
    .detailed-results-box{
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .summary-wrapper{
        .tit{
          
        }
      }
      
      .main-img{
        width: 596rpx;
        // height: 596rpx;
        margin: auto;
        margin-top: 50rpx;
      }
      
      .conclusion{
        margin-bottom: 46rpx;

        height: 48rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #333333;
        line-height: 48rpx;
        text-align: justify;
        font-style: normal;
      }
      
      .sub-img-wrapper{
        display: flex;
        justify-content: center;
      }
      .sub-img{
        
        max-width: 500rpx;
        height: auto;
        margin: auto;
      }
      
      
      
    }
    // .detailed-results-box - end
    
    .science-popularization-box{
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .summary-wrapper{
        .img{
          margin: auto;
          margin-bottom: 52rpx;
          &,image{
            width: 568rpx;
            height: 248rpx;
            // background-color: #185199;
          }
        }
        .tit{
          
        }
      }
      
      .sub-img{
        margin: auto;
        margin-bottom: 48rpx;
        &,image{
          width: 568rpx;
        }
      }
      
    }
    // .science-popularization-box - end
    
    .suggestions-box{
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .summary-wrapper{
        .img{
          margin: auto;
          margin-bottom: 70rpx;
          &,image{
            width: 558rpx;
            height: 276rpx;
            // background-color: #185199;
          }
        }
        .tit{
          
        }
      }
    }
    // .suggestions-box - end
    
    .references-box{
      margin-top: 70rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .tit{
        margin-left: 36rpx;
        width: fit-content;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #195199;
        padding-bottom: 6rpx;
        border-bottom: 2rpx solid rgba(25, 81, 153, .3);
      }
      
      .text-list{
        margin: auto;
        margin-top: 18rpx;
        width: 675rpx;
        // height: 1416rpx;
        border: 1rpx solid #C1C1C1;
        padding: 14rpx 18rpx;
        .text{
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #666666;
          line-height: 46rpx;
          text-indent: 1.5em;
          
              text-align: justify;

        }
      }
    }
    // .references-box -end
    .report-time-box{
      margin: auto;
      margin-top: 32rpx;
      width: 709rpx;
      border-top: 4rpx solid #666;
      padding-top: 16rpx;
      padding-bottom: 50rpx;
      padding-left: 14rpx;
      padding-right: 14rpx;
      display: flex;
      justify-content: space-between;
      
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 300;
      color: #666666;
      
    }
    
    
    
    
    .p{
      
      font-size: 32rpx;
      font-family: PingFang-SC, PingFang-SC;
      // font-weight: 500;
      color: #333333;
      line-height: 62rpx;
      text-indent: 1.5em;
      
      text-align: justify;
    }
    
    .summary-wrapper{
      padding: 0 40rpx;
      margin-top: 50rpx;
      margin-bottom: 30rpx;
      .tit{
        margin: auto;
        text-align: center;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #185199;
        margin-bottom: 50rpx;
        
      }
    }
    
    .block{
      padding: 0 40rpx;
      margin-bottom: 40rpx;
      
      .p{
        margin-bottom: 40rpx;
      }
      
      .sub-tit{
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #195199;
        margin-bottom: 18rpx;
        margin-top: 70rpx;
        // margin-left: -24rpx;
        margin-left: -4rpx;
      }
      
      .sub-sub-tit{
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #000000;
        margin-bottom: 18rpx;
      }
      
      .text-list{
        display: flex;
        flex-direction: column;
        row-gap: 16rpx;
        .li{
          width: 694rpx;
          
          // width: 592rpx;
          height: 75rpx;
          line-height: 75rpx;
          background-image: linear-gradient(270deg, rgba(238,238,238,0) 0%, rgba(245,249,255,0.4) 53%, #D8E9FF 100%);
          background-size: 592rpx 75rpx;
          background-repeat: no-repeat;
          border-radius: 2rpx;
          // opacity: 0.43;
          
          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
          // font-weight: 500;
          color: #333333;
          
          padding-left: 20rpx;
        }
      }
    }
    
  }
</style>